// 严格模式
"use strict";

/***************************************1.浏览器对象模型 (BOM)*********************************/
function browserObject(){
    var  element = document.getElementById('func_browserObject');

    element.innerText = '\n/***************************************1.浏览器对象模型 (BOM)*********************************/\n\n' +
        '/*********1. window对象不但充当全局作用域，而且表示浏览器窗口。***********/\n' +
        '\n' +
        '    // window对象有innerWidth和innerHeight属性，可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高。\n' +
        '\n' +
        '    //全局变量是 window 对象的属性。\n' +
        '\n' +
        '    //全局函数是 window 对象的方法。\n' +
        '\n' +
        '    //甚至 HTML DOM 的 document 也是 window 对象的属性之一\n' +
        '      window.document.getElementById("header")\n' +
        '\n' +
        '    //1.1.获取浏览器窗口内宽高 三种方法\n' +
        '\n' +
        '    //方法一：Internet Explorer、Chrome、Firefox、Opera 以及 Safari\n' +
        '     window.innerHeight   //浏览器窗口的内部高度  window.innerWidth   //浏览器窗口的内部宽度\n' +
        '\n' +
        '\n' +
        '    //方法二：Internet Explorer 8、7、6、5\n' +
        '     document.documentElement.clientWidth;\n' +
        '     document.documentElement.clientHeight;\n' +
        '\n' +
        '     //或者\n' +
        '     document.body.clientHeight;\n' +
        '     document.body.clientWidth;\n' +
        '\n' +
        '\n' +
        '     //通用方法\n' +
        '     var  windowWidth = window.innerWidth || document.documentElement.clientWidth ||  document.body.clientWidth;\n' +
        '     var  windowHeight = window.innerHeight || document.documentElement.clientHeight ||  document.body.clientHeight;\n' +
        '    //console.log(\'窗口的内宽:\' + windowWidth + \'内高:\' +windowHeight +\'\\n\' +\'窗口的宽:\' +window.outerWidth + \'高:\' +window.outerHeight );\n' +
        '\n' +
        '    //1.2.window 其他方法\n' +
        '    // window.open() - 打开新窗口\n' +
        '    // window.close() - 关闭当前窗口\n' +
        '    // window.moveTo() - 移动当前窗口\n' +
        '    // window.resizeTo() - 调整当前窗口的尺寸\n' +
        '\n' +
        '    /*********2. navigator对象表示浏览器的信息***********/\n' +
        '\n' +
        '    // console.log(\'浏览器名称\' + navigator.appName);\n' +
        '    // console.log(\'浏览器版本\' + navigator.appVersion);\n' +
        '    // console.log(\'浏览器设置的语言\' + navigator.language);\n' +
        '    // console.log(\'操作系统类型\' + navigator.platform);\n' +
        '    // console.log(\'浏览器设定的User-Agent字符串\' + navigator.userAgent);\n' +
        '\n' +
        '    /*********3. screen对象表示屏幕的信息***********/\n' +
        '\n' +
        '    // console.log(\'屏幕宽度，以像素为单位\' + screen.width  + \'可用宽度\' + screen.availWidth);\n' +
        '    // console.log(\'屏幕高度，以像素为单位\' + screen.height + \'可用高度\' + screen.availHeight);\n' +
        '    // console.log(\'色彩深度 返回颜色位数，如8、16、24\' + screen.colorDepth);\n' +
        '    // console.log(\'色彩分辨率: \' + screen.pixelDepth);\n' +
        '\n' +
        '\n' +
        '    /*********4. window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。***********/\n' +
        '\n' +
        '    // console.log(\'web 主机的域名 : \' + location.hostname);\n' +
        '    // console.log(\'当前页面的路径和文件名:\' + location.pathname);\n' +
        '    // console.log(\'web 主机的端口 :\' + location.port);\n' +
        '    // console.log(\'使用的 web 协议:\' + location.protocol);\n' +
        '    // console.log(\'location.href   属性返回当前页面的 URL。\' + location.href);\n' +
        '    // console.log(\'location.assign() 方法加载新的文档\');\n' +
        '    // console.log(\'location.reload() 重新加载当前页面\');\n' +
        '\n' +
        '     //e.g http://www.example.com:8080/path/index.html?a=1&b=2#TOP\n' +
        '    /**\n' +
        '     *    location.protocol  ----->   http\n' +
        '     *    location.host      ----->   www.example.com\n' +
        '     *    location.pathname  ----->   /path/index.html\n' +
        '     *    location.search    ----->   a=1&b=2\n' +
        '     *    location.hash      ----->   TOP\n' +
        '     *\n' +
        '     *\n' +
        '     */\n' +
        '\n' +
        '    /*********5. document对象表示当前页面。document对象就是整个DOM树的根节点***********/\n' +
        '\n' +
        '    document //DOM树的根节点\n' +
        '\n' +
        '    document.title = \'加油哦\';  //从HTML文档中的<title>xxx</title>读取的\n' +
        '\n' +
        '    document.getElementById(\'\');  //通过id 获取节点\n' +
        '\n' +
        '    document.getElementsByTagName(\'\');  //通过tagName获取一组节点\n' +
        '\n' +
        '    console.log(document.cookie)  //document对象还有一个cookie属性，可以获取当前页面的Cookie。\n' +
        '    // 服务器端在设置Cookie时，应该始终坚持使用httpOnly\n' +
        '\n' +
        '    /*\n' +
        '    *  设置保存cookie  cookie 名、cookie 值、cookie过期时间\n' +
        '    */\n' +
        '    function setCookie(ckey, cvalue,cexpiresDay) {\n' +
        '\n' +
        '        var  d = new  Date();\n' +
        '        d.setTime(d.getTime() + (cexpiresDay *24*60*60*1000));\n' +
        '        var expires = \'expires=\' + d.toTimeString();\n' +
        '        document.cookie = ckey + \'=\' + cvalue + \';\' + expires;\n' +
        '    }\n' +
        '\n' +
        '    /*\n' +
        '    *    获取cookie  cookie 名\n' +
        '    */\n' +
        '    function getCookie(ckey) {\n' +
        '        var  key = ckey + \'=\';\n' +
        '        var  cookielist = document.cookie.split(\';\');\n' +
        '        for (var i = 0; i < cookielist.length; i++) {\n' +
        '            var c = cookielist[i].trim();\n' +
        '            if(c.indexOf(key) == 0){\n' +
        '                return c.substring(key.length,c.length);\n' +
        '            }\n' +
        '        }\n' +
        '        return \'\';\n' +
        '    }\n' +
        '\n' +
        '     //使用检测\n' +
        '    function checkCookie() {\n' +
        '\n' +
        '        var  key = \'userName\'; //key\n' +
        '        var  value = \'刘子彬\'; //value\n' +
        '        var  day = 20;       //时间\n' +
        '\n' +
        '        var  cookie = getCookie(key);\n' +
        '        if(cookie.length != 0){\n' +
        '            alert(\'欢迎\' + cookie + \'再次访问\');\n' +
        '        }else {\n' +
        '            value = prompt("请输入你的名字:","");\n' +
        '            if (value!="" && value!=null){\n' +
        '                setCookie(key,value,day);\n' +
        '            }\n' +
        '\n' +
        '        }\n' +
        '    }\n' +
        '\n' +
        '    /*********6. history对象保存了浏览器的历史记录***********/\n' +
        '\n' +
        '    history.back();   // 与在浏览器点击后退按钮相同\n' +
        '\n' +
        '    history.forward();  // 与在浏览器中点击按钮向前相同\n' +
        '\n' +
        '    /*********6. 三种消息框：警告框、确认框、提示框***********/\n' +
        '\n' +
        '    // alert("你好，我是一个警告框！");\n' +
        '\n' +
        '    // var result = confirm(\'您好我是一个确认框\');\n' +
        '    // if(result == true){\n' +
        '    //     console.log(\'你按下了\\\\"确定\\\\"按钮!"\')\n' +
        '    // }else {\n' +
        '    //     console.log(\'你按下了\\\\"取消\\\\"按钮!"\')\n' +
        '    // }\n' +
        '\n' +
        '    // var person=prompt("我是一个提示框：请输入你的名字","Harry Potter");\n' +
        '    // if (person!=null && person!="")\n' +
        '    // {\n' +
        '    //     var x="你好 " + person + "! 今天感觉如何?";\n' +
        '    //     console.log(x);\n' +
        '    // }\n' +
        '\n' +
        '    /*********7. 计时事件***********/\n' +
        '\n' +
        '    //setInterval()  //间隔指定的毫秒数不停地执行指定的代码。\n' +
        '\n' +
        '    //setTimeout()   //在指定的毫秒数后执行指定代码。\n' +
        '\n' +
        '    //window.setInterval(\'func\',milliseconds); //setInterval() 第一个参数是函数（function）。 第二个参数间隔的毫秒数\n' +
        '\n' +
        '    //停止执行\n' +
        '   // clearInterval()  //方法用于停止 setInterval() 方法执行的函数代码。\n' +
        '\n' +
        '   //停止执行\n' +
        '    //window.clearTimeout(timeoutVariable)\n' +
        '\n' +
        '    var timer0 = window.setInterval((function () {\n' +
        '         var  d = new  Date();\n' +
        '         var e = document.getElementById(\'timer_click\');\n' +
        '         e.innerHTML = d.toTimeString();\n' +
        '    }),1000);\n' +
        '    clearInterval(timer0);'

}
/***************************************2.浏览器操作DOM*********************************/
function browserOperationDOM(){
     var  ele = document.getElementById('func_browserOperationDOM');
     ele.innerText = '\n/***************************************2.浏览器操作DOM*********************************/\n\n' +
         '// 1.DOM HTML文档被浏览器解析后就是一棵DOM树，要改变HTML的结构，就需要通过JavaScript来操作DOM。\n' +
         '\n' +
         '     //更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容\n' +
         '\n' +
         '     //遍历：遍历该DOM节点下的子节点，以便进行进一步操作；\n' +
         '\n' +
         '     // 添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；\n' +
         '\n' +
         '     // 删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。\n' +
         '\n' +
         '      // 获取节点方式 两种\n' +
         '\n' +
         '     // 方式一：document.getElementById()可以直接定位唯一的一个DOM节点。document.getElementsByTagName()和document.getElementsByClassName()\n' +
         '\n' +
         '     // 方式二： querySelector()和querySelectorAll() 条件搜索\n' +
         '\n' +
         '\n' +
         '     //2.DOM节点更新 方法innerHTML\n' +
         '\n' +
         '     // var  p = document.getElementById(\'\');\n' +
         '\n' +
         '     // p.innerHTML = \'更新DOM\';  //写入的字符串是通过网络拿到了，要注意对字符编码\n' +
         '\n' +
         '     // p.innerText = \'更新DOM\';  //自动对字符串进行HTML编码，保证无法设置任何HTML标签\n' +
         '\n' +
         '     // p.textContent = \'更新DOM\'; //innerText不返回隐藏元素的文本，而textContent返回所有文本\n' +
         '\n' +
         '     //3.DOM节点的插入 innerHTML:替换之前的节点\n' +
         '\n' +
         '    // appendChild:把一个子节点添加到父节点的最后一个子节点\n' +
         '    // insertBefore  可以使用parentElement.insertBefore(newElement, referenceElement);，子节点会插入到referenceElement之前。\n' +
         '\n' +
         '        //A节点增加到B节点的后面\n' +
         '        var js = document.getElementById(\'A\');\n' +
         '        var superlist = document.getElementById(\'B\');\n' +
         '        superlist.appendChild(js); // 因此这个节点首先会从原先的位置删除，再插入到新的位置。\n' +
         '\n' +
         '        //动态插入节点\n' +
         '        var superlist = document.getElementById(\'B\');\n' +
         '        var  js_create_element = document.createElement(\'p\');\n' +
         '        js_create_element.id = \'123\';\n' +
         '        js_create_element.innerText = \'动态新增节点\';\n' +
         '        superlist.appendChild(js_create_element);\n' +
         '\n' +
         '\n' +
         '       //插入某一个节点位置\n' +
         '        var subNode = document.getElementById(\'A\'); //一个“参考子节点”的引用\n' +
         '        var superlist = document.getElementById(\'B\');\n' +
         '        var  js_create_element = document.createElement(\'p\');\n' +
         '        js_create_element.id = \'123\';\n' +
         '        js_create_element.innerText = \'动态新增节点\';\n' +
         '        superlist.insertBefore(js_create_element,subNode);\n' +
         '\n' +
         '     // 4.删除DOM\n' +
         '     // removeChild 调用父节点的removeChild把自己删掉\n' +
         '     // replaceChild 替换 HTML DOM 中的元素\n' +
         '\n' +
         '\n' +
         '     var  curentNode = document.getElementById(\'\'); // 拿到待删除节点:\n' +
         '     var  parentNode = curentNode.parentElement;  // 拿到父节点:\n' +
         '     var  removeNode = parentNode.removeChild(curentNode);// 删除:\n' +
         '\n' +
         '     var para = document.createElement("p");\n' +
         '     var  repleaceNodel = parentNode.replaceChild(para,curentNode);\n' +
         '       //删除多个节点时，要注意children属性时刻都在变化 children是一个自读属性\n' +
         '\n' +
         '\n' +
         '    // 5.HTML DOM对象\n' +
         '\n' +
         '    //javascript 可以操作HTML元素 、 属性、 样式、事件\n' +
         '\n' +
         '    // document.getElementById(id).innerHTML=新的 HTML    插入HTML\n' +
         '    document.getElementById(\'\').innerHTML = \'\';\n' +
         '\n' +
         '    // document.getElementById(id).attribute=新属性值   修改属性\n' +
         '    document.getElementById(\'\').src = \'\';\n' +
         '\n' +
         '    // document.getElementById(id).style.property=新样式   改变 HTML 样式\n' +
         '    document.getElementById(\'\').style.color = \'red\';\n' +
         '\n' +
         '    // 用户交互元素的时候分配事件   改变事件\n' +
         '    document.getElementById(\'\').onclick = function () {\n' +
         '        \n' +
         '    }\n' +
         '\n' +
         '    //用户事件\n' +
         '\n' +
         '    //onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本\n' +
         '\n' +
         '    //onunload 事件可用于处理 cookie。\n' +
         '\n' +
         '    // onchange 事件常结合对输入字段的验证来使用。\n' +
         '\n' +
         '    // onmouseover 用户的鼠标移至 HTML 元素上方。\n' +
         '\n' +
         '    // onmouseout  用户的鼠标移出元素时触发函数\n' +
         '\n' +
         '    // onmousedown  用户的鼠标按下触发函数\n' +
         '\n' +
         '    // onmouseup   用户的鼠标松开时触发函数\n' +
         '\n' +
         '    // onclick   用户的鼠标点击触发函数\n' +
         '\n' +
         '    // onfocus   用户的输入框获取焦点\n' +
         '\n' +
         '    //6、DOM操作监听\n' +
         '    // addEventListener() 方法用于向指定元素添加事件句柄,添加的事件句柄不会覆盖已存在的事件句柄。\n' +
         '\n' +
         '    //removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:\n' +
         '\n' +
         '    //语法\n' +
         '    /*\n' +
         '    *  第一个参数是事件的类型 (如 "click" 或 "mousedown"). (注意:不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。)\n' +
         '    *  第二个参数是事件触发后调用的函数。\n' +
         '    *  第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。\n' +
         '    *  在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素\n' +
         '    *  在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件\n' +
         '    * */\n' +
         '    element.addEventListener(event, function, useCapture);\n' +
         '     document.getElementById(\'func_browserOperationDOM\').addEventListener(\'click\',function () {\n' +
         '          alert(\'监听到点击事件\');\n' +
         '     },true);\n' +
         '\n' +
         '\n' +
         '     // 7.注意点\n' +
         '     /**\n' +
         '      *  1、getElementsByTagName() 方法返回 HTMLCollection 对象。 HTMLCollection 不是数组，类似数组 具有length 方法\n' +
         '      *\n' +
         '      *  2、getElementsByClassName()  返回的是 NodeList 对象 类似 HTMLCollection\n' +
         '      *\n' +
         '      *   HTMLCollection对象 和 NodeList对象区别\n' +
         '      *   A、 NodeList 是一个文档节点的集合，HTMLCollection 是 HTML 元素的集合\n' +
         '      *\n' +
         '      *   B、 NodeList 与 HTMLCollection 都有 length 属性\n' +
         '      *\n' +
         '      *   C、 NodeList 只能通过索引来获取 HTMLCollection 元素可以通过 name，id 或索引来获取。\n' +
         '      *\n' +
         '      *   D、 只有 NodeList 对象有包含属性节点和文本节点\n' +
         '      * */';
}

/***************************************3.浏览器操作表单*********************************/
function browserOperationFromat(){
    var  ele = document.getElementById('func_browserOperationFromat');

    ele.innerText = '\n/***************************************3.浏览器操作表单*********************************/\n\n' +
        '// 1.操作表单和操作DOM是类似的，因为表单本身也是DOM树 只是表单输入框、下拉框等可以接收用户输入\n' +
        '    // 表单控件\n' +
        '    /**\n' +
        '     *   文本框，对应的<input type="text">，用于输入文本；\n' +
        '     *\n' +
        '     *   口令框，对应的<input type="password">，用于输入口令\n' +
        '     *\n' +
        '     *   单选框，对应的<input type="radio">，用于选择一项\n' +
        '     *\n' +
        '     *   复选框，对应的<input type="checkbox">，用于选择多项\n' +
        '     *\n' +
        '     *   下拉框，对应的<select>，用于选择一项；\n' +
        '     *\n' +
        '     *   隐藏文本，对应的<input type="hidden">，用户不可见，但表单提交时会把隐藏文本发送到服务器\n' +
        '     *\n' +
        '     * */\n' +
        '\n' +
        '\n' +
        '      // <input type="text" id="email">\n' +
        '      // var input = document.getElementById(\'email\');\n' +
        '      // input.value;   //获取值\n' +
        '\n' +
        '     //2. 提交表单(两种方式)\n' +
        '\n' +
        '     // 方式一是通过<form>元素的submit()方法提交一个表单\n' +
        '     /*\n' +
        '          <form id = \'test-form\' onsubmit= "return checkForm()">\n' +
        '            <input id = \'form-input\' type="text" name="userName">\n' +
        '            <input id = \'form-password\', type="password" name="password">\n' +
        '            <button id=" form-button" type="submit">提交</button>\n' +
        '        </form>\n' +
        '            <script>\n' +
        '                function checkForm() {\n' +
        '                    var input = document.getElementById(\'form-input\');\n' +
        '                    var password = document.getElementById(\'form-password\');\n' +
        '                    password.value = \'123456\';\n' +
        '                    // 可以在此修改form的input... 验证输入内容\n' +
        '                    // 继续下一步:\n' +
        '                    console.log(input.value);\n' +
        '                    return true;\n' +
        '                }\n' +
        '            </script>\n' +
        '           注意要return true来告诉浏览器继续提交，\n' +
        '           如果return false，浏览器将不会继续提交form，这种情况通常对应用户输入有误，提示用户错误信息后终止提交form。\n' +
        '           没有name属性的<input>的数据不会被提交。\n' +
        '      */\n' +
        '\n' +
        '\n' +
        '    // 方式二是通过AJAX方法提交一个表单\n' +
        '\n' +
        '    //3. 操作文件 HTML表单中，可以上传文件的唯一控件就是<input type="file">。\n' +
        '    /*\n' +
        '    * 注意：当一个表单包含<input type="file">时，\n' +
        '    * 表单的enctype必须指定为multipart/form-data\n' +
        '    * method必须指定为post\n' +
        '    * 浏览器才能正确编码并以multipart/form-data格式发送表单的数据\n' +
        '    * */\n' +
        '    \n' +
        '    //上传文件检测扩展名\n' +
        '    function checkFileExtionsion() {\n' +
        '        var  file = document.getElementById(\'\');\n' +
        '        var  fileName = file.value;\n' +
        '        if(!fileName || !(fileName.endsWith(\'.jpg\') || fileName.endsWith(\'.png\') || fileName.endsWith(\'.gif\'))){\n' +
        '            alert(\'Can only upload image file.\');\n' +
        '            return false;\n' +
        '        }\n' +
        '    }\n';

}

/***************************************4.AJAX 异步网络请求*********************************/
//异步网络请求
function excuteAsyNetwork() {

    var  ele = document.getElementById('func_excuteAsyNetwork');
     ele.innerText = '\n/***************************************4.AJAX 异步网络请求*********************************/\n\n' +
         '// Web的运作原理：一次HTTP请求对应一个页面,AJAX请求是异步执行的  JavaScript所有代码都是单线程执行的\n' +
         '\n' +
         '    // 1.XMLHttpRequest 请求\n' +
         '\n' +
         '    var request;\n' +
         '    if (window.XMLHttpRequest) {\n' +
         '        request = new XMLHttpRequest();  // 新建XMLHttpRequest对象 标准的\n' +
         '    } else {\n' +
         '        request = new ActiveXObject(\'Microsoft.XMLHTTP\'); // 以前的请求\n' +
         '    }\n' +
         '\n' +
         '\n' +
         '    //监听请求\n' +
         '    request.onreadystatechange = function () { // 状态发生变化时，函数被回调\n' +
         '        if(request.readyState == 4){  // 请求完成\n' +
         '            //判断结果\n' +
         '            console.log(request.response);\n' +
         '            if(request.status == 200){\n' +
         '                // 成功，通过responseText拿到响应的文本:\n' +
         '                return successBlock(request.response);\n' +
         '            }else {\n' +
         '                // 失败，根据响应码判断失败原因:\n' +
         '                return failBlock(request.code);\n' +
         '            }\n' +
         '\n' +
         '        }else {\n' +
         '            // HTTP请求还在继续...\n' +
         '        }\n' +
         '    }\n' +
         '\n' +
         '    // 发送请求\n' +
         '    //第一个参数指定是GET还是POST，第二个参数指定URL地址，第三个参数指定是否使用异步，默认是true，所以不用写。\n' +
         '    request.open(\'GET\',\'api/categories\');\n' +
         '\n' +
         '    //调用send()方法才真正发送请求。GET请求不需要参数，POST请求需要把body部分以字符串或者FormData对象传进去\n' +
         '    request.send();\n' +
         '\n' +
         '   // alert(\'请求已发送，请等待响应...\');\n' +
         '\n' +
         '    function successBlock(response) {\n' +
         '        console.log(\'请求结果\' + response);\n' +
         '    }\n' +
         '\n' +
         '    function failBlock(code) {\n' +
         '        console.log(\'请求失败code =\' + code);\n' +
         '    }\n' +
         '\n' +
         '\n' +
         '    // 2.安全限制\n' +
         '\n' +
         '    //默认情况下，JavaScript在发送AJAX请求时，URL的域名必须和当前页面完全一致。\n' +
         '    request.open(\'GET\',\'api/categories\');\n' +
         '\n' +
         '    //JavaScript请求外域（就是其他网站）的URL的方法：\n' +
         '    /*\n' +
         '    * 一是通过Flash插件发送HTTP请求，这种方式可以绕过浏览器的安全限制，但必须安装Flash，并且跟Flash交互。不过Flash用起来麻烦，而且现在用得也越来越少了。\n' +
         '    *\n' +
         '    * 二是通过在同源域名下架设一个代理服务器来转发，JavaScript负责把请求发送到代理服务器\n' +
         '    *\n' +
         '    * 三、JSONP，它有个限制，只能用GET请求，并且要求返回JavaScript。这种方式跨域实际上是利用了浏览器允许跨域引用JavaScript资源\n' +
         '    *    JSONP通常以函数调用的形式返回\n' +
         '    *\n' +
         '    * 四、HTML5的 一劳永逸地使用新的跨域策略：CORS 重点的跨域服务器是否设置 Access-Control-Allow-Origin 包含本地域名\n' +
         '    * */\n' +
         '\n' +
         '     //方式三\n' +
         '     function getPrice() {\n' +
         '         var  js = document.createElement(\'script\');\n' +
         '         js.src = \'http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice\';\n' +
         '         var  head =document.getElementsByTagName(\'head\')[0];\n' +
         '         head.appendChild(js);\n' +
         '     }\n' +
         '\n' +
         '     //方式四：\n' +
         '\n' +
         '     //除了JavaScript和CSS外  都要验证CORS\n' +
         '\n' +
         '    // 简单请求：GET、HEAD和POST（POST的Content-Type类型\n' +
         '    // 仅限application/x-www-form-urlencoded、multipart/form-data和text/plain），并且不能出现任何自定义头（例如，X-Custom: 12345）\n' +
         '\n' +
         '    //PUT、DELETE以及其他类型如application/json的POST请求\n' +
         '    // 在发送AJAX请求之前，浏览器会先发送一个OPTIONS请求（称为preflighted请求）到这个URL上，询问目标服务器是否接受：\n' +
         '    /**\n' +
         '     *   请求\n' +
         '         OPTIONS /path/to/resource HTTP/1.1\n' +
         '         Host: bar.com\n' +
         '         Origin: http://my.com\n' +
         '         Access-Control-Request-Method: POST\n' +
         '     *\n' +
         '     * */\n' +
         '\n' +
         '\n' +
         '     /**\n' +
         '      *   响应 - 服务器必须响应并明确指出允许的Method\n' +
         '      *\n' +
         '      *   HTTP/1.1 200 OK\n' +
         '          Access-Control-Allow-Origin: http://my.com\n' +
         '          Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS\n' +
         '          Access-Control-Max-Age: 86400\n' +
         '      *\n' +
         '      * */\n' +
         '\n' +
         '\n' +
         '      // 3.Promise对象 希望执行、承诺执行 执行异步方法\n' +
         '        //  异步串行 Promise最大的好处是在异步执行的流程中，把执行代码和处理结果的代码清晰地分离了\n' +
         '         // 多任务异步并行 Promise.all()\n' +
         '\n' +
         '\n' +
         '    var p = new Promise(function (resolve,reject) {\n' +
         '             console.log(\'开始执行new  promise .......\');\n' +
         '\n' +
         '             var  time =Math.random() * 2;\n' +
         '\n' +
         '             console.log(\'设置初始时间是\' + time);\n' +
         '\n' +
         '             setTimeout(function () {\n' +
         '                 if(time < 1){\n' +
         '                     console.log(\'call resolve()...\');\n' +
         '                     resolve(\'200 OK\');\n' +
         '                 }else {\n' +
         '                     console.log(\'call reject()..\');\n' +
         '                     reject(\'错误\');\n' +
         '                 }\n' +
         '             },time * 1000);\n' +
         '\n' +
         '         });\n' +
         '\n' +
         '     p.then(function (success) {\n' +
         '          console.log(\'成功：\' + success);\n' +
         '     }).catch(function (fail) {\n' +
         '         console.log(\'失败：\' + fail);\n' +
         '     });\n' +
         '\n' +
         '      //异步网络请求更改 代码集中\n' +
         '    function ajaxRequest(method,url,param) {\n' +
         '        var request;\n' +
         '        if(window.XMLHttpRequest){\n' +
         '            request = new XMLHttpRequest();\n' +
         '        }else {\n' +
         '            request = new ActiveXObject();\n' +
         '        }\n' +
         '\n' +
         '        var p =new Promise(function (resolve,reject) {\n' +
         '               \n' +
         '                request.onreadystatechange = function () {\n' +
         '                    if(request.readyState == 4){  // 请求完\n' +
         '                        //判断结果\n' +
         '                        console.log(request.response);\n' +
         '                        if(request.status == 200){\n' +
         '                            // 成功，通过responseText拿到响应的文本:\n' +
         '                            resolve(request.response);\n' +
         '                        }else {\n' +
         '                            // 失败，根据响应码判断失败原因:\n' +
         '                             reject(request.code);\n' +
         '                        }\n' +
         '\n' +
         '                    }else {\n' +
         '                        // HTTP请求还在继续...\n' +
         '                    }\n' +
         '                }\n' +
         '            request.open(method, url);\n' +
         '            request.send(param);\n' +
         '        });\n' +
         '\n' +
         '\n' +
         '\n' +
         '        return p;\n' +
         '    }\n' +
         '     var  networkTool = ajaxRequest(\'GET\',\'api/user\',{"id":\'12344\'});\n' +
         '        networkTool.then(function (response) { // 如果AJAX成功，获得响应内容\n' +
         '            console.log(\'请求结果===\' + response);\n' +
         '        }).catch(function (fail) {  // 如果AJAX失败，获得响应代码\n' +
         '            console.log(\'请求失败=====\' + fail);\n' +
         '        })\n' +
         '    \n' +
         '    \n' +
         '       //多任务并发执行\n' +
         '       \n' +
         '       var  p1 = new Promise(function (resolve,reject) {\n' +
         '           setTimeout(resolve, 500, \'P1\');\n' +
         '        });\n' +
         '\n' +
         '        var  p2 = new Promise(function (resolve,reject) {\n' +
         '            setTimeout(resolve, 500, \'P1\');\n' +
         '        });\n' +
         '\n' +
         '         //// 同时执行p1和p2，并在它们都完成后执行then:\n' +
         '         Promise.all([p1,p2]).then(function (result) {\n' +
         '             console.log(results); // 获得一个Array: [\'P1\', \'P2\']\n' +
         '         });\n' +
         '\n' +
         '         //如过p1执行较快，Promise的then()将获得结果\'P1\'。p2仍在继续执行，但执行结果将被丢弃。 只要执行比较看的清情况\n' +
         '        Promise.race([p1,p2]).then(function (result) {\n' +
         '            console.log(results); // 获得一个Array: [\'P1\', \'P2\']\n' +
         '        });';
}